import $ from './library/jquery.js'
import cookie from './library/cookie.js';

// 获取登录的用户名
if (sessionStorage.getItem('username')) {
    $('.header .topnav p.fl em span').html(sessionStorage.getItem('username'));
}

//页面渲染

let id = location.search.split('=')[1];

$.ajax({
    type: 'get',
    url: '../../interface/getItem.php',
    data: { id },
    dataType: 'json'
}).then(res => {

    //顶部图片
    $('.banner .b-top .t-img').html(res.toppic);
    let picture = JSON.parse(res.picture);
    // console.log(picture);
    // console.log(res);
    //大图 
    let bigimg = `<img src="../${picture[0].src}" alt="">`
    $('.banner .b-detail .b-left .bigimg').append(bigimg);

    //下面的小图 
    let botimg = '';
    picture.forEach((el, i) => {
        botimg += `
            <li>
                <a href="javascript:;" data-title="${i}">
                    <img src="../${el.src}" alt="">
                </a>
            </li>`;

    })
    $('.banner .b-detail .b-left .s-img ul').html(botimg);

    //标题
    $('.banner .b-detail .b-de-center .bc-title h2').html(res.title);
    //价格
    $('.banner .b-detail .b-de-center .bc-price em').html(parseFloat(res.price).toFixed(2));

    //颜色分类
    let type = JSON.parse(res.type);
    let typeImg = '';
    // console.log(type);
    type.forEach((el, i) => {
        typeImg += `
    <li>
        <a href="javascript:;" data-title="${i}">
            <img src="../${el.src}" alt="">
            <i></i>
        </a>
    </li>`;
    })
    $('.banner .b-detail .b-de-center .key .colorlist ul').html(typeImg);

    //库存
    $('.banner .b-detail .b-de-center .key .num dd .kuNum').html(res.num);
    $('.banner .b-detail .b-de-center .key .num dd input').attr("max", res.num);

    //看了又看
    let kan = '';
    picture.forEach((el, i) => {
        kan += ` <li>
        <a href="javascript:;">
            <img src="../${el.src}" alt="">
            <p>￥${res.price}</p>
        </a>
    </li>`;
    });
    $('.banner .b-detail .b-de-right .dr-content ul').html(kan);

    //商品详情
    $('.shop-de').append(res.details);
    // console.log(res);


    //购物车
    $('.b-detail .b-de-center .action-btn .addcar').on("click", function () {
        addItem(res.id, $('.b-detail .b-de-center .key .num dd input').val());
    })

}).catch(xhr => {
    console.log(xhr.status);
});

// cookie中存储的数据是 字符串类型
// 在cookie中存储 json字符串
function addItem(id, num) {

    let shop = cookie.get('shop');
    let product = { id, num };

    // 判断是否已经有属性
    if (shop) {
        shop = JSON.parse(shop);

        // 判断商品在购物车数据中是否存在
        if (shop.some(el => el.id == id)) {
            let index = shop.findIndex(elm => elm.id == id);
            let count = parseInt(shop[index].num);
            count += parseInt(num);
            shop[index].num = count;
        } else {
            shop.push(product);
        }
    } else {
        shop = [];
        shop.push(product);
    }
    cookie.set('shop', JSON.stringify(shop), 1);
}

//绑定事件
$(function () {

    // 切换图片
    let imgbox = $('.b-detail .b-de-right .dr-content ul');
    let pre = $('.b-detail .b-de-right .dr-btn .pre');
    let next = $('.b-detail .b-de-right .dr-btn .next');

    //设置当鼠标划到下面的小图 对应的大图自动出现
    $(document).on("mouseenter", ".b-detail .b-left .s-img a", function () {
        $('.b-detail .b-left .s-img a').removeClass("sected");
        $(this).addClass('sected');
        $('.b-detail .b-left .bigimg img').attr("src", $(this).children().attr('src'));
    });

    $(document).on("click", ".b-detail .b-de-center .key .colorlist a", function () {
        $('.b-detail .b-de-center .key .colorlist a').removeClass("select");
        $(this).addClass('select');
        $('.b-detail .b-left .bigimg img').attr("src", $(this).children().attr('src'));
    });

    // 设置当鼠标划入大图  放大镜效果
    $(document).on("mouseenter", ".b-detail .b-left .bigimg", function () {
        let span = $('.b-left .bigimg .magnify');

        $('.b-detail .b-left .bigimg').on('mousemove', function (ev) {

            let x = ev.offsetX;
            let y = ev.offsetY;
            // console.log(x, y);
            // if (x < 0) {
            //     x = 0;
            // } else if (x >= 218) {
            //     x = 218;
            // }
            // if (y < 0) {
            //     y = 0;
            // } else if (y >= 218) {
            //     y = 218;
            // }
            // span.css({
            //     left: x + 'px',
            //     top: y + 'px'
            // }, 0);
            let url = $('.b-detail .b-left .bigimg img').attr('src');
            $('.b-detail .b-left .bigimg .rightimg').css({
                'background-position': -x + 'px ' + -y + 'px',
                'background-image': `url(${url})`
            });
        })

    });

    //切换照片
    pre.on('click', function () {
        imgbox.css('top', 0);
    });
    next.on('click', function () {
        imgbox.css('top', '-480px');
    });



});